<template>
  <div>
    <div v-if="loading">数据加载中...</div>
    <div v-else class="list">
      <dl v-for="v in list" :key="v.id">
        <dt>
          <img :src="v.url" alt="" />
        </dt>
        <dd>
          <h3>{{ v.title }}</h3>
          <p>{{ v.desc }}</p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "homeView",
  computed: {
    ...mapState({
      loading: (state) => state.home.loading,
      list: (state) => state.home.list,
    }),
  },
  methods: {
    ...mapActions("home", ["fetchList"]),
  },
  mounted() {
    this.fetchList();
  },
};
</script>


<style scoped lang="scss">
dl {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
</style>